<template>
  <div class="article-list-box">
    <a-list
      item-layout="vertical"
      size="large"
      :data-source="articleListData"
      :loading="loading"
    >
      <div
        v-if="showLoadingMore"
        slot="loadMore"
        :style="{
          textAlign: 'center',
          marginTop: '12px',
          height: '32px',
          lineHeight: '32px',
        }"
      >
        <a-spin v-if="loadingMore" />
        <a-button v-else @click="onLoadMore" class="my-load-more-btn"
          >加载更多</a-button
        >
      </div>
      <a-list-item slot="renderItem" key="item.title" slot-scope="item">
        <template v-for="{ type, text } in item.actions" slot="actions">
          <span :key="type">
            <a-icon :type="type" style="margin-right: 8px" />
            {{ text }}
          </span>
        </template>
        <!-- <img slot="extra" width="272" alt="logo" :src="item.firstPicture" /> -->
        <MyImg slot="extra" :imgSrc="item.firstPicture" :imgWidth="'272px'" :imgHeight="'168px'"></MyImg>
        <a-list-item-meta>
          <div slot="description">
            <ul class="article-tag-list">
              <li v-for="value in item.tags" :key="value.id">
                <a-tag># {{ value.name }}</a-tag>
              </li>
            </ul>
          </div>
          <div slot="title" class="article-intro">
            <a-tag color="orange" class="title-tag">{{ item.type.name }}</a-tag>
            <router-link
              :to="{ name: 'detail', params: { blogId: item.id } }"
              class="article-title"
              >{{ item.title }}</router-link
            >
          </div>
          <a-avatar slot="avatar" :src="item.avatar" />
        </a-list-item-meta>
        <span class="article-introduction">{{ item.introduction }}</span>
      </a-list-item>
      <a-divider class="no-content-divider hidden">没有更多内容了</a-divider>
    </a-list>
  </div>
</template>

<script>
import MyImg from './MyImg'
export default {
  name: "ArticleList",
  props: {
    //标识最热还是最新
    listFlag: {
      type: String,
      default: "",
    },
    //分类参数
    articleTypeParm: {
      type: Number,
      default: 0
    }
  },
  components:{
    MyImg
  },
  data() {
    return {
      articleListData: [],
      //后台传过来的博客总数
      total: 0,
      //请求博客参数
      params: {
        query: "",
        pagenum: 1,
        pagesize: 2,
      },
      //加载更多
      loading: true,
      loadingMore: false,
      showLoadingMore: true,
    };
  },
  mounted() {
    if (this.listFlag === "latest") {
      this.params["orderBy"] = "blog.updateTime";
    } else if (this.listFlag === "hotest") {
      this.params["orderBy"] = "blog.views";
    }
    if(this.articleTypeParm !== 0){
      this.params['typeId'] = this.articleTypeParm
    }
    //第一次进入页面不显示加载更多按钮
    if(this.articleListData.length === 0){
      this.showLoadingMore = false
    }
    this.getArticleList();
  },
  methods: {
    // 请求文章列表
    async getArticleList() {
      try {
        const { data: res } = await this.$http.get("blogByQuery", {
          params: this.params,
        });
        this.articleListData = this.articleListData.concat(res.data.blogs);
        this.total = res.data.total;
        this.loading = false;
        this.loadingMore = false;
        //显示加载更多按钮
        this.showLoadingMore = true
        // actions数组赋值
        this.articleListData.forEach((item) => {
          // 临时
          item.avatar = "/images/avatar2.jpg";
          item.actions = [];
          item.actions[0] = {
            type: "fire",
            text: item.views,
          };
          item.actions[1] = {
            type: "user",
            text: item.user.username,
          };
          item.actions[2] = {
            type: "schedule",
            text: new Date(item.createTime).toLocaleDateString(),
          };
        });
        //没有更多内容了
        if (this.articleListData.length === this.total) {
          this.$nextTick(() => {
            document.getElementsByClassName("my-load-more-btn").forEach(item => item.classList.add('hidden'))
            document.getElementsByClassName('no-content-divider').forEach(item => item.classList.remove('hidden'))
          });
        }
      } catch (e) {
        console.log(e);
      }
    },
    onLoadMore() {
      this.loadingMore = true;
      this.params.pagenum += 1;
      this.getArticleList();
    },
  },
};
</script>

<style lang="less" scoped>
// 文章列表区域
.article-tag-list {
  list-style: none;
  padding-left: 0;
  display: flex;
}
.title-tag {
  margin-right: 15px;
  height: 25px;
  line-height: 25px;
  &:hover {
    font-weight: bold;
  }
}
.article-title {
  font-size: 20px;
  font-weight: bolder;
  height: 25px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.article-intro {
  display: flex;
  align-items: center;
}
// 超出部分省略号
.ant-list-item-meta-content {
  overflow: hidden;
}
.hidden {
  display: none !important;
}
.article-list-box {
  /deep/ ul.ant-list-item-action {
    margin-top: 40px !important;
  }
}
.article-list-box {
  /deep/ ul.ant-list-items{
    li.ant-list-item{
      &:nth-last-child(1){
        border-bottom: none !important;
      }
    }
  }
}
</style>